import React from 'react'
import Const from "../Const";
import CustomScrollbars from "./CustomScrollbars";

class ChatPanel extends React.Component {
    state = {}
    editorWarp = null;

    //组件被render之后调用
    componentDidMount() {

    }

    //组件被移除DOM之后调用
    componentWillUnmount() {

    }

    render() {
        return (
            <div className='chat-panel'>
                <div className='notice-warp'>
                    <em className='iconfont icon-gonggao'></em>
                    <span className='notice-gg'>公告：</span>
                    <span className='notice-content'>整点满血复活</span>
                </div>
                <div className='tab-warp'>
                    <div className='tab-head'>
                        <span className='tab-head-item'>贡献榜</span>
                        <span className='tab-head-item active'>成就榜</span>
                        <span className='tab-head-item'>贵宾（999）</span>
                    </div>
                    <div className='tab-content'>
                        tab内容
                    </div>
                </div>
                <CustomScrollbars className='chat-list-warp'>
                    <ul className="chat-room-list">
                        <li className="msg-item">
                            <p style={{
                                "color": "#3c0",
                            }}>系统消息：管理员依法对聊天内容进行24小时巡查，禁止传播违法违规、封建迷信、暴力血腥、低俗色情、招嫖诈骗、违禁品等不良信息，坚决维护青少年群体精神文明健康。请勿轻信各类招聘征婚、代练代抽、刷钻、购买礼包码、游戏币、电商贩卖等广告信息或私下交易等信息，且以免上当受骗。</p>
                        </li>
                        <li className="msg-item">
                            <div className="msg-normal">
                                <span className='color-o'>[我]</span>
                                <span className="name J_userMenu" title="点击查看个人信息">Dada</span>
                                <span className="colon">:</span>
                                <span className="msg">fdasjfdjaksljflkdsajflkfdasjfd</span>
                            </div>
                        </li>
                        <li className="msg-item">
                            <div className="msg-normal">
                                <span className="name J_userMenu" title="点击查看个人信息">是小七咯</span>
                                <span className="colon">:</span>
                                <span className="msg">不限制技术上面是我v 记得截图哦！</span>
                            </div>
                        </li>
                        {
                            [1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 1, 1, 1, 1, 1, 1].map((i,index) => {
                                return (
                                    <li className="msg-item" key={index}>
                                        <div className="msg-normal">
                                            <span className="name J_userMenu" title="点击查看个人信息">是小七咯</span>
                                            <span className="colon">:</span>
                                            <span className="msg">不限制技术上面是我v不限制技术上面是我v不限制技术上面是我v 记得截图哦！</span>
                                        </div>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </CustomScrollbars>
                <div className='send-msg-warp'>
                    <div className='send-warp'>
                        <textarea className='input-warp'></textarea>
                        <div className='send-btn'>发送</div>
                    </div>
                </div>

            </div>
        )
    }
}

export default ChatPanel
